<template>
  <div class="dashboard-container1">
    <vue-particles color="#212121" />
    <el-row style="justify-content: center; height: 100%;  overflow-x: auto; flex-direction: row;position:relative;z-index:999;">
      <el-col style="min-width: 400px;height: 100%; width: 1200px;">
        <el-card style="height: 100%;  overflow-y: auto;">
          <el-row>
            <el-col :span="11">
              <div class="tools-div" style="height: 770px;width: 520px">
                <div
                  id="myBingChart"
                  ref="myBingChart"
                  class="myBingChart"
                  :style="{ float: 'left', width: '560px', height: '300px'}"
                />
                <div
                  id="chart"
                  ref="chart"
                  class="chart"
                  :style="{ float: 'left', width: '550px', height: '250px' }"
                />
                <div
                  id="chart1"
                  ref="chart1"
                  class="chart1"
                  :style="{ float: 'left', width: '550px', height: '250px' }"
                />
              </div>
            </el-col>
            <el-col :span="13">
              <div class="tools-div">
                <el-row>
                  <el-select v-model="bookValue" style="width: 600px" placeholder="请选择" size="small" @change="selectChange">
                    <el-option
                      v-for="item in bookList"
                      :key="item.id"
                      :label="item.book.tallyBookName"
                      :value="item.book.id"
                    />
                  </el-select>
                </el-row>
                <el-row style="margin-top:10px">
                  <el-button size="mini" type="primary" plain style="margin-left: 0px;" @click="addZhi(1)">收入记账</el-button>
                  <el-button size="mini" type="success" plain @click="addZhi(0)">支出记账</el-button>
                  <el-button size="mini" type="info" plain @click="addLabel1()">标签配置</el-button>
                  <el-button size="mini" type="warning" plain @click="exportExcel">Excel明细导出</el-button>
                  <el-button size="mini" type="info" plain @click="gongxiang">共享配置</el-button>
                  <el-button size="mini" type="info" plain @click="yaoqingOpen">邀请码</el-button>
                  <el-button size="mini" type="primary" icon="el-icon-setting" circle @click="outerVisible=true" />
                </el-row>

                <el-row style="margin-top:10px">
                  <el-date-picker
                    v-model="value2"
                    size="mini"
                    style="width: 340px;"
                    type="daterange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="center"
                    @change="selectChangeDate"
                  />
                  <el-radio-group v-model="searchLabel.type" style="margin-left: 20px" size="mini" @change="handleChange">
                    <el-radio-button label="0">全部明细</el-radio-button>
                    <el-radio-button label="1">收入明细</el-radio-button>
                    <el-radio-button label="2">支出明细</el-radio-button>
                  </el-radio-group>
                </el-row>
              </div>

              <div class="tools-div">
                <el-row style="width: 600px">
                  <el-table
                    :data="tableData"
                    :row-class-name="tableRowClassName"
                  >
                    <el-table-column
                      label=""
                      width="35"
                    >
                      <template slot-scope="scope">
                        <svg class="icon3" aria-hidden="true">
                          <use :xlink:href="scope.row.icon" />
                        </svg>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="labelName"
                      label="类型"
                      width="120"
                    />
                    <el-table-column
                      prop="money"
                      label="金额"
                      width="100"
                    />
                    <el-table-column
                      prop="createTime"
                      label="时间"
                    />
                    <el-table-column>
                      <template slot-scope="scope">
                        <el-button size="mini" round @click="upTable(scope.row)">修改</el-button>
                        <el-button size="mini" round @click.native="deleteTable(scope.row.id)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div>
                    <el-pagination
                      v-if="total>10"
                      background
                      style="margin-left: 220px;"
                      :current-page="searchLabel.page"
                      :page-size="searchLabel.pageSize"
                      layout="total, prev, pager, next"
                      :total="total"
                      @current-change="handleCurrentChange"
                    />
                  </div>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!--新增账本关系-->
    <el-dialog width="58%" title="我的账本" top="4%" :append-to-body="true" :visible.sync="outerVisible">
      <div>
        <el-button type="primary" size="mini" @click="innerVisible = true">新增账本</el-button>
      </div>
      <el-dialog
        width="40%"
        title="新增账本"
        :visible.sync="innerVisible"
        append-to-body
        v-bind="$attrs"
        v-on="$listeners"
        @open="onOpen"
        @close="onClose"
      >
        <el-form ref="tallyBookForm" :model="tallyBook" :rules="labelRules" size="medium" label-width="80px">
          <el-form-item label="账本名称" prop="tallyBookName">
            <el-input v-model="tallyBook.tallyBookName" placeholder="请设置账本名称" show-word-limit clearable :style="{width: '100%'}" />
          </el-form-item>
          <el-form-item label="账本描述" prop="description">
            <el-input v-model="tallyBook.description" placeholder="请填写账本描述" show-word-limit clearable :style="{width: '100%'}" />
          </el-form-item>
          <el-form-item label="账本类型" prop="typeId">
            <el-select v-model="tallyBook.typeId" placeholder="请选择账本类型" size="medium" :style="{width: '100%'}">
              <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.icon" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.typeName }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否默认" prop="isDefault" required>
            <el-switch v-model="tallyBook.isDefault" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="addBook">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog
        width="40%"
        title="修改账本"
        :visible.sync="innerVisible2"
        append-to-body
        v-bind="$attrs"
        v-on="$listeners"
        @open="onOpenUp"
        @close="onCloseUp"
      >
        <el-form ref="tallyBookFormUp" :model="tallyBookUp" :rules="labelRules" size="medium" label-width="80px">
          <el-form-item label="账本名称" prop="tallyBookName">
            <el-input v-model="tallyBookUp.tallyBookName" placeholder="请设置账本名称" show-word-limit clearable :style="{width: '100%'}" />
          </el-form-item>
          <el-form-item label="账本描述" prop="description">
            <el-input v-model="tallyBookUp.description" placeholder="请填写账本描述" show-word-limit clearable :style="{width: '100%'}" />
          </el-form-item>
          <el-form-item label="账本类型" prop="typeId">
            <el-select v-model="tallyBookUp.typeId" placeholder="请选择账本类型" size="medium" :style="{width: '100%'}">
              <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.icon" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.typeName }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否默认" prop="isDefault" required>
            <el-switch v-model="tallyBookUp.isDefault" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeUp">取 消</el-button>
          <el-button type="primary" @click="updateById()">确认修改</el-button>
        </div>
      </el-dialog>

      <el-row style="margin-top: 15px">
        <el-col v-for="item in bookList" :key="bookList.id" style="width: 33.333%">
          <el-card>
            <el-row>
              <el-col style="width: 38%">
                <svg class="icon1" aria-hidden="true">
                  <use :xlink:href="item.type.icon" />
                </svg>
              </el-col>
              <el-col style="width: 60%">
                <el-row style="margin-top: 5px">
                  <el-col style="width: 90%">名称：{{ item.book.tallyBookName }}</el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                  <el-col style="width: 90%">类型：{{ item.type.typeName }}</el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                  <el-col style="width: 90%">描述：{{ item.book.description }}</el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                  <el-col style="width: 100%">设置：  <el-link type="primary" @click="getById(item.book.id)">修改</el-link>  <el-link type="success" @click="deleteById(item.book.id)">删除</el-link></el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                  <el-tag v-if="item.book.isDefault==1" size="mini" effect="dark" type="danger">默认账本</el-tag>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 账务记录新增 -->
    <el-dialog :visible.sync="innerVisible4" v-bind="$attrs" :title="'新增'+title" v-on="$listeners" @open="onOpenZhi" @close="onCloseZhi">
      <el-form
        ref="tallyFinancialForm"
        :model="tallyFinancial"
        :rules="labelRules2"
        size="medium"
        label-width="93px"
      >
        <el-form-item :label="title+'类型:'" prop="labelId">
          <el-select
            v-model="tallyFinancial.labelId"
            placeholder="请选择下拉选择支出类型"
            clearable
            :style="{width: '100%'}"
          >
            <el-option
              v-for="(item, index) in labelIdOptions"
              :key="index"
              :label="item.labelName"
              :value="item.id"
            >
              <span style="float: left">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="item.icon" />
                </svg>
              </span>
              <span style="padding-left: 6px">{{ item.labelName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="title+'金额'" prop="money">
          <el-input v-model="tallyFinancial.money" placeholder="请输入支出金额" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item :label="title+'描述'" prop="description">
          <el-input v-model="tallyFinancial.description" placeholder="请输入支出描述" clearable :style="{width: '100%'}" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="closeZhi">取消</el-button>
        <el-button type="primary" @click="addZhi1">确定</el-button>
      </div>
    </el-dialog>

    <!-- 账本明细修改 -->
    <el-dialog :visible.sync="innerVisible5" v-bind="$attrs" title="修改标签" v-on="$listeners" @close="onCloseZhiUp">
      <el-form
        ref="tallyFinancialFormUp"
        :model="tallyFinancialUp"
        :rules="labelRules2"
        size="medium"
        label-width="93px"
      >
        <el-form-item label="类型:" prop="labelId">
          <el-select
            v-model="tallyFinancialUp.labelId"
            placeholder="请选择下拉选择支出类型"
            clearable
            :style="{width: '100%'}"
          >
            <el-option
              v-for="(item, index) in labelIdOptions"
              :key="index"
              :label="item.labelName"
              :value="item.id"
            >
              <span style="float: left">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="item.icon" />
                </svg>
              </span>
              <span style="padding-left: 6px">{{ item.labelName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额" prop="money">
          <el-input v-model="tallyFinancialUp.money" placeholder="请输入支出金额" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="tallyFinancialUp.description" placeholder="请输入支出描述" clearable :style="{width: '100%'}" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="closeZhiUp">取消</el-button>
        <el-button type="primary" @click="ZhiUp">确定</el-button>
      </div>
    </el-dialog>

    <!--用户自定义-统一标签配置-->
    <el-dialog width="58%" title="我的标签" top="4%" :append-to-body="true" :visible.sync="outerVisibleLabel">
      <div>
        <el-button type="primary" size="mini" @click="newLabelAdd">新增标签</el-button>
      </div>
      <el-dialog
        width="40%"
        title="新增标签(仅为当前账本添加)"
        :visible.sync="innerVisibleLabelAdd"
        append-to-body
        v-bind="$attrs"
        v-on="$listeners"
        @open="onOpen"
        @close="onCloseLabel"
      >
        <el-form ref="elFormLabel" :model="labelFormData" :rules="labelRulesNew" size="mini" label-width="93px">
          <el-form-item label="标签名称" prop="labelName">
            <el-input v-model="labelFormData.labelName" placeholder="请输入标签名称" clearable :style="{width: '100%'}" />
          </el-form-item>
          <el-form-item label="标签描述" prop="labelDescription">
            <el-input
              v-model="labelFormData.labelDescription"
              placeholder="请输入标签描述"
              clearable
              :style="{width: '100%'}"
            />
          </el-form-item>
          <el-form-item label="标签类型" prop="incomeOrExpense">
            <el-radio-group v-model="labelFormData.incomeOrExpense" size="medium">
              <el-radio
                v-for="(item, index) in incomeOrExpenseOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="labelFormData.sort" placeholder="排序" :step="1" />
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-radio-group v-model="iconType" style="margin-bottom: 2px">
              <el-radio-button label="图标策略1" />
              <el-radio-button label="图标策略2" />
              <el-radio-button label="图标策略3" />
            </el-radio-group><br>
            <el-radio-group v-model="iconType" style="margin-bottom: 5px">
              <el-radio-button label="图标策略4" />
              <el-radio-button label="图标策略5" />
              <el-radio-button label="图标策略6" />
            </el-radio-group><br>
            <el-select v-if="iconType==='图标策略1'" v-model="labelFormData.icon" prop="icon" placeholder="图标策略1" clearable>
              <el-option v-for="item in adminIcon1List" :key="item.class" :label="item.class" :value="item.class">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.class" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.name }}</span>
              </el-option>
            </el-select>
            <el-select v-if="iconType==='图标策略2'" v-model="labelFormData.icon" prop="icon" placeholder="图标策略2" clearable>
              <el-option v-for="item in adminIcon2List" :key="item.class" :label="item.class" :value="item.class">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.class" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.name }}</span>
              </el-option>
            </el-select>
            <el-select v-if="iconType==='图标策略3'" v-model="labelFormData.icon" prop="icon" placeholder="图标策略3" clearable>
              <el-option v-for="item in adminIcon3List" :key="item.class" :label="item.class" :value="item.class">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.class" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.name }}</span>
              </el-option>
            </el-select>
            <el-select v-if="iconType==='图标策略4'" v-model="labelFormData.icon" prop="icon" placeholder="图标策略4" clearable>
              <el-option v-for="item in adminIcon4List" :key="item.class" :label="item.class" :value="item.class">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.class" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.name }}</span>
              </el-option>
            </el-select>
            <el-select v-if="iconType==='图标策略5'" v-model="labelFormData.icon" prop="icon" placeholder="图标策略5" clearable>
              <el-option v-for="item in adminIcon5List" :key="item.class" :label="item.class" :value="item.class">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.class" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.name }}</span>
              </el-option>
            </el-select>
            <el-select v-if="iconType==='图标策略6'" v-model="labelFormData.icon" prop="icon" placeholder="图标策略6" clearable>
              <el-option v-for="item in adminIcon6List" :key="item.class" :label="item.class" :value="item.class">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.class" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="closeAddLabel">取消</el-button>
          <el-button type="primary" @click="addLabel">确定</el-button>
        </div>
      </el-dialog>

      <el-dialog
        width="40%"
        title="修改标签"
        :visible.sync="innerVisibleLabelUpdate"
        append-to-body
        v-bind="$attrs"
        v-on="$listeners"
        @open="onOpenUp"
        @close="onCloseUp"
      >
        <el-form ref="elFormLabel" :model="labelFormDataUp" :rules="labelRulesNew" size="mini" label-width="93px">
          <el-form-item label="标签名称" prop="labelName">
            <el-input v-model="labelFormDataUp.labelName" placeholder="请输入标签名称" clearable :style="{width: '100%'}" />
          </el-form-item>
          <el-form-item label="标签描述" prop="labelDescription">
            <el-input
              v-model="labelFormDataUp.labelDescription"
              placeholder="请输入标签描述"
              clearable
              :style="{width: '100%'}"
            />
          </el-form-item>
          <el-form-item label="标签类型" prop="incomeOrExpense">
            <el-radio-group v-model="labelFormDataUp.incomeOrExpense" size="medium">
              <el-radio
                v-for="(item, index) in incomeOrExpenseOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="labelFormDataUp.sort" placeholder="排序" :step="1" />
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-radio-group v-model="iconType" style="margin-bottom: 2px">
              <el-radio-button label="图标策略1" />
              <el-radio-button label="图标策略2" />
              <el-radio-button label="图标策略3" />
            </el-radio-group><br>
            <el-radio-group v-model="iconType" style="margin-bottom: 5px">
              <el-radio-button label="图标策略4" />
              <el-radio-button label="图标策略5" />
              <el-radio-button label="图标策略6" />
            </el-radio-group><br>
            <el-select v-if="iconType==='图标策略1'" v-model="labelFormDataUp.icon" prop="icon" placeholder="图标策略1" clearable>
              <el-option v-for="item in adminIcon1List" :key="item.class" :label="item.class" :value="item.class">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.class" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.name }}</span>
              </el-option>
            </el-select>
            <el-select v-if="iconType==='图标策略2'" v-model="labelFormDataUp.icon" prop="icon" placeholder="图标策略2" clearable>
              <el-option v-for="item in adminIcon2List" :key="item.class" :label="item.class" :value="item.class">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.class" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.name }}</span>
              </el-option>
            </el-select>
            <el-select v-if="iconType==='图标策略3'" v-model="labelFormDataUp.icon" prop="icon" placeholder="图标策略3" clearable>
              <el-option v-for="item in adminIcon3List" :key="item.class" :label="item.class" :value="item.class">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.class" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.name }}</span>
              </el-option>
            </el-select>
            <el-select v-if="iconType==='图标策略4'" v-model="labelFormDataUp.icon" prop="icon" placeholder="图标策略4" clearable>
              <el-option v-for="item in adminIcon4List" :key="item.class" :label="item.class" :value="item.class">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.class" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.name }}</span>
              </el-option>
            </el-select>
            <el-select v-if="iconType==='图标策略5'" v-model="labelFormDataUp.icon" prop="icon" placeholder="图标策略5" clearable>
              <el-option v-for="item in adminIcon5List" :key="item.class" :label="item.class" :value="item.class">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.class" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.name }}</span>
              </el-option>
            </el-select>
            <el-select v-if="iconType==='图标策略6'" v-model="labelFormDataUp.icon" prop="icon" placeholder="图标策略6" clearable>
              <el-option v-for="item in adminIcon6List" :key="item.class" :label="item.class" :value="item.class">
                <span style="float: left">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.class" />
                  </svg>
                </span>
                <span style="padding-left: 6px">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="closeAddLabel">取消</el-button>
          <el-button type="primary" @click="updateByIdLabel">确定</el-button>
        </div>
      </el-dialog>
      <el-radio v-model="radio" style="margin-top: 15px" label="0" @change="addLabel1">支出标签配置</el-radio>
      <el-radio v-model="radio" style="margin-top: 15px" label="1" @change="addLabel1">收入标签配置</el-radio>
      <el-row style="margin-top: 15px">
        <el-col v-for="item in labelIdOptions" :key="item.id" style="width: 25%">
          <el-card>
            <el-row>
              <el-col :span="8">
                <span style="float: left;">
                  <svg class="icon2" aria-hidden="true">
                    <use :xlink:href="item.icon" />
                  </svg>
                </span>
              </el-col>
              <el-col :span="16">
                <el-row style="margin-top: 5px">
                  <el-col style="width: 90%">名称：{{ item.labelName }}</el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                  <el-col v-if="item.tallyBookId!==null" style="width: 100%">设置：  <el-link type="primary" @click="getByLabelId(item.id)">修改</el-link>  <el-link type="success" @click="removeByIdLabel(item.id)">删除</el-link></el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                  <el-tag v-if="item.tallyBookId!==null" size="mini" effect="dark">自定义</el-tag>
                  <el-tag v-if="item.tallyBookId==null" size="mini" effect="dark" type="danger">默认标签</el-tag>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>

    <el-dialog title="共享账本" :visible.sync="dialogFormVisibleAddLabel" width="30%">
      您当前账本的邀请码为：<a>{{gongxiangcode}}</a>
    </el-dialog>

    <el-dialog title="请输入邀请码：" :visible.sync="dialogFormVisibleAddLabel1" width="30%">
      <el-input
        v-model="yanzhengCode"
        placeholder="请输入邀请码："
        clearable
        size="mini"
        :style="{width: '100%'}"
      />
      <div slot="footer">
        <el-button size="mini" @click="dialogFormVisibleAddLabel1=false">取消</el-button>
        <el-button size="mini" type="primary" @click="yaoqing">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tallyBook from '@/api/tally/tallyBook'
import tallyTypeBook from '@/api/tally/tallyTypeBook'
import tallyLabel from '@/api/tally/tallyLabel'
import tallyFinancial from '@/api/tally/tallyFinancial'
import gongxiang from '@/api/tally/gongxiang'
import labelApi from '@/api/tally/labelApi'
import * as echarts from 'echarts'
import {
  adminIcon1List,
  adminIcon2List,
  adminIcon3List,
  adminIcon4List,
  adminIcon5List,
  adminIcon6List
} from '@/api/constant_api'
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
  name: 'Dashboard',
  data() {
    return {
      radio: '1',
      adminIcon1List: adminIcon1List,
      adminIcon2List: adminIcon2List,
      adminIcon3List: adminIcon3List,
      adminIcon4List: adminIcon4List,
      adminIcon5List: adminIcon5List,
      adminIcon6List: adminIcon6List,
      iconType: '图标策略1',
      tableData: [],
      title: 0,
      yanzhengCode: '',
      total: 0,
      token: getToken(),
      tallyFinancial: {},
      tallyFinancialUp: {},
      tabPosition: '1',
      bookValue: '',
      value2: [this.handleTimeOld(new Date()), this.handleTimeNew(new Date())],
      bookList: [],
      labelIdOptions: [],
      typeList: [],
      outerVisible: false,
      gongxiangcode: '',
      innerVisible: false,
      innerVisible2: false,
      innerVisible4: false,
      innerVisible5: false,
      outerVisibleLabel: false,
      innerVisibleLabelAdd: false,
      innerVisibleLabelUpdate: false,
      dialogFormVisibleAddLabel: false,
      dialogFormVisibleAddLabel1: false,
      incomeOrExpenseOptions: [{
        'label': '收入',
        'value': 1
      }, {
        'label': '支出',
        'value': 0
      }],
      bingData: {
        label: [],
        money: []
      },
      zhe1Data: {
        date: [],
        money: []
      },
      zhe2Data: {
        date: [],
        money: []
      },
      searchLabel: {
        page: 1,
        pageSize: 10,
        type: '0'
      },
      searchLabel1: {
        page: 1,
        pageSize: 10,
        type: '0'
      },
      labelFormData: {
        labelName: '',
        labelDescription: '',
        typeId: '',
        incomeOrExpense: 1,
        sort: '',
        icon: ''
      },
      labelFormDataUp: {
        labelName: '',
        labelDescription: '',
        typeId: '',
        incomeOrExpense: 1,
        sort: '',
        icon: ''
      },
      searchLabel2: {
        page: 1,
        pageSize: 10,
        type: '0'
      },
      labelSearch: {
        tallyBookTypeId: undefined,
        tallyBookId: undefined,
        incomeOrExpense: undefined
      },
      tallyBookUp: {
        tallyBookName: undefined,
        typeId: undefined,
        description: undefined,
        isDefault: false
      },
      tallyBook: {
        tallyBookName: undefined,
        typeId: undefined,
        description: undefined,
        isDefault: false
      },
      labelRules2: {
        labelId: [{
          required: true,
          message: '请选择下拉选择支出类型',
          trigger: 'change'
        }],
        money: [{
          required: true,
          message: '请输入支出金额',
          trigger: 'blur'
        }],
        description: []
      },
      labelRules: {
        tallyBookName: [{
          required: true,
          message: '请输入账本名称',
          trigger: 'blur'
        }],
        description: [{
          required: true,
          message: '请输入账本描述',
          trigger: 'blur'
        }],
        typeId: [{
          required: true,
          message: '请选择下拉选择',
          trigger: 'change'
        }]
      },
      labelRulesNew: {
        labelName: [{
          required: true,
          message: '请输入标签名称',
          trigger: 'blur'
        }],
        labelDescription: [{
          required: true,
          message: '请输入标签描述',
          trigger: 'blur'
        }],
        typeId: [{
          required: true,
          message: '请输入所属类型',
          trigger: 'blur'
        }],
        incomeOrExpense: [{
          required: true,
          message: '标签类型不能为空',
          trigger: 'change'
        }]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.getTypeList()
    this.getBookList()
  },
  methods: {
    /** ******************echers**********************/
    // 饼图
    getBingData() {
      this.searchLabel.time = this.value2
      this.searchLabel.tallyBookId = this.bookValue
      tallyFinancial.getBing(this.searchLabel).then(response => {
        this.bingData = response.data
        this.myBingChart()
      })
    },
    // 支出
    getZhi1Data() {
      this.searchLabel2.time = this.value2
      this.searchLabel2.type = '0'
      this.searchLabel2.tallyBookId = this.bookValue
      tallyFinancial.getZhi(this.searchLabel2).then(response => {
        this.zhe2Data = response.data
        console.log(response.data)
        this.initEcharts()
      })
    },
    // 收入
    getZhi2Data() {
      this.searchLabel1.time = this.value2
      this.searchLabel1.type = '1'
      this.searchLabel1.tallyBookId = this.bookValue
      tallyFinancial.getZhi(this.searchLabel1).then(response => {
        this.zhe1Data = response.data
        this.initEcharts1()
      })
    },
    /** **********************日期方法*************************/
    handleTimeOld (time, split) {
      const date = new Date(time)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      split = '-'
      return [year, month, 1].map(num => this.formatNumber(num)).join(split)
    },
    handleTimeNew (time) {
      const date = new Date(time)
      const year = date.getFullYear()
      const month = (date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))
      const day = date.getDate() > 10 ? date.getDate() : ('0' + date.getDate())
      return `${year}-${month}-${day}`
    },
    formatNumber(number) {
      return String(number)[1] ? String(number) : `0${number}`
    },
    getById(id) {
      this.innerVisible2 = true
      tallyBook.getById(id).then(response => {
        this.tallyBookUp = response.data
      })
    },
    updateById() {
      this.$refs.tallyBookFormUp.validate(valid => {
        if (valid) {
          tallyBook.updateById(this.tallyBookUp).then(response => {
            this.getBookList()
            this.innerVisible2 = false
          })
        }
      })
    },
    getBookList() {
      tallyBook.getList().then(response => {
        this.bookList = response.data
        this.bookValue = this.bookList[0].book.id
        this.getBingData()
        this.getZhi1Data()
        this.getZhi2Data()
        this.labelSearch.tallyBookId = this.bookList[0].book.id
        this.searchLabel.tallyBookId = this.bookList[0].book.id
        this.getPage()
      })
    },
    getTypeList() {
      tallyTypeBook.getList().then(response => {
        this.typeList = response.data
      })
    },
    addBook() {
      this.$refs.tallyBookForm.validate(valid => {
        if (valid) {
          tallyBook.save(this.tallyBook).then(response => {
            this.innerVisible = false
            this.getBookList()
            this.close()
          })
        }
      })
    },
    deleteById(id) {
      this.$confirm('此操作将永久删除该账本, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        tallyBook.removeById(id).then(response => {
          this.getBookList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /** *******************账本管理**********************/
    onOpen() {},
    onOpenUp() {},
    onClose() {
      this.$refs['tallyBookForm'].resetFields()
    },
    close() {
      this.innerVisible = false
      this.$emit('update:visible', false)
    },
    closeUp() {
      this.innerVisible2 = false
      this.$emit('update:visible', false)
    },
    onCloseUp() {
      this.$refs['tallyBookFormUp'].resetFields()
    },
    /** *****************账务明细管理**********************/
    onOpenZhi() {
      this.innerVisible4 = true
    },
    onCloseZhi() {
      this.innerVisible4 = false
      this.$refs['tallyFinancialForm'].resetFields()
    },
    closeZhi() {
      this.innerVisible4 = false
      this.$emit('update:visible', false)
    },
    addZhi(type) {
      if (type === 1) {
        this.title = '收入'
        this.tallyFinancial.incomeOrExpense = type
        this.getLabelList(1)
      } else {
        this.title = '支出'
        this.tallyFinancial.incomeOrExpense = type
        this.getLabelList(0)
      }
      this.innerVisible4 = true
    },
    // 获取标签下拉菜单
    getLabelList(type) {
      this.labelSearch.incomeOrExpense = type
      this.labelSearch.tallyBookId = this.bookValue
      tallyLabel.getList(this.labelSearch).then(response => {
        this.labelIdOptions = response.data
      })
    },
    /** ******************账务明细管理**********************/
    addZhi1() {
      this.tallyFinancial.tallyBookId = this.bookValue
      tallyFinancial.save(this.tallyFinancial).then(response => {
        this.innerVisible4 = false
        this.getPage()
      })
    },
    // 确认修改明细
    ZhiUp() {
      tallyFinancial.update(this.tallyFinancialUp).then(response => {
        this.innerVisible5 = false
        this.getPage()
      })
    },
    deleteTable(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        tallyFinancial.removeById(data).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getPage()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    onCloseZhiUp() {
      this.$refs['tallyFinancialFormUp'].resetFields()
    },
    upTable(data) {
      this.innerVisible5 = true
      if (data.incomeOrExpense) {
        this.title = '收入'
        this.tallyFinancial.incomeOrExpense = data.incomeOrExpense
        this.getLabelList(1)
      } else {
        this.title = '支出'
        this.tallyFinancial.incomeOrExpense = data.incomeOrExpense
        this.getLabelList(0)
      }
      // 查询标签下拉菜单
      this.tallyFinancialUp = data
    },
    // 关闭修改明细弹出框
    closeZhiUp() {
      this.innerVisible5 = false
      this.$emit('update:visible', false)
    },
    getPage() {
      this.searchLabel.time = this.value2
      this.searchLabel.tallyBookId = this.bookValue
      tallyFinancial.findPage(this.searchLabel).then(response => {
        this.tableData = response.data.rows
        this.total = response.data.total
      })
    },
    handleCurrentChange(val) {
      this.searchLabel.page = val
      this.getPage()
    },
    handleChange() {
      this.getPage()
    },
    // 选择账本
    selectChange() {
      this.getPage()
      this.getEcharts()
    },
    // 选择日期
    selectChangeDate() {
      this.getPage()
      this.getEcharts()
    },
    getEcharts() {
      this.getBingData()
      this.getZhi1Data()
      this.getZhi2Data()
    },
    initEcharts1() {
      const option = {
        title: {
          text: '收入分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.zhe1Data.date
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.zhe1Data.money,
            smooth: true,
            type: 'line'
          }
        ]
      }
      const myChart1 = echarts.init(this.$refs.chart1, '')// 图标初始化
      myChart1.setOption(option)// 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart1.resize()
      })
    },
    initEcharts() {
      const option = {
        title: {
          text: '支出分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.zhe2Data.date
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.zhe2Data.money,
            smooth: true,
            type: 'line'
          }
        ]
      }
      const myChart = echarts.init(this.$refs.chart, '')// 图标初始化
      myChart.setOption(option)// 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    myBingChart() {
      const option = {
        title: {
          text: '消费概览',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.bingData.label,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      const myBingChart = echarts.init(this.$refs.myBingChart, '')// 图标初始化
      myBingChart.setOption(option)// 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myBingChart.resize()
      })
    },
    /** ********************用户自定义标签标签修改****************************/
    addLabel1() {
      this.outerVisibleLabel = true
      this.getLabelList(this.radio)
    },
    addLabel() {
      this.$refs['elFormLabel'].validate(valid => {
        if (valid) {
          labelApi.add(this.labelFormData).then(response => {
            if (response.code === 200) {
              this.$message({
                message: '新增成功！',
                type: 'success'
              })
              this.innerVisibleLabelAdd = false
              this.getLabelList(this.radio)
            }
          })
        }
      })
    },
    closeAddLabel() {
      this.innerVisibleLabelAdd = false
      this.$refs['elFormLabel'].resetFields()
    },
    onCloseLabel() {
      this.innerVisibleLabelAdd = false
    },
    newLabelAdd() {
      this.labelFormData.tallyBookId = this.bookValue
      this.innerVisibleLabelAdd = true
    },
    removeByIdLabel(id) {
      labelApi.removeById(id).then(response => {
        if (response.code === 200) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.getLabelList(this.radio)
        }
      })
    },
    getByLabelId(id) {
      labelApi.getById(id).then(response => {
        this.innerVisibleLabelUpdate = true
        this.labelFormDataUp = response.data
      })
    },
    updateByIdLabel() {
      this.$refs['elFormLabel'].validate(valid => {
        if (valid) {
          labelApi.updateById(this.labelFormDataUp).then(response => {
            if (response.code === 200) {
              this.$message({
                message: '修改成功！',
                type: 'success'
              })
              this.innerVisibleLabelUpdate = false
              this.getLabelList(this.radio)
            }
          })
        }
      })
    },
    exportExcel() {
      axios({
        url: `/service-system/system/tallyFinancialRecord/export`,
        method: 'POST',
        data: this.searchLabel,
        responseType: 'blob', // 确保响应类型是blob，以便可以创建一个可下载的文件
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          'token': this.token
        }
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', '账本数据导出.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }).catch(error => {
        console.error(error)
      })
    },
    gongxiang() {
      this.dialogFormVisibleAddLabel = true
      gongxiang.save(this.labelSearch.tallyBookId).then(response => {
        if (response.code === 200) {
          this.gongxiangcode = response.data.code
        }
      })
    },
    yaoqingOpen(){
      this.dialogFormVisibleAddLabel1=true
    },
    yaoqing(){
      gongxiang.getInvite(this.yanzhengCode).then(response => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.icon1 {
  width: 8em;
  height: 8em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon2 {
  width: 5em;
  height: 5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon3 {
  width: 1.8em;
  height: 1.8em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
::v-deep .el-dialog__body {
  padding: 20px;
}
::v-deep .dialogForm .form-outer {
  padding: 10px 10px;
  .form-inner {
    padding: 0;
  }
}

 #particles-js{
        width: 100%;
        height: calc(100% - 100px);
        position: absolute;   //设置absolute,其他DIV设置为relative，这样这个例子效果就作为背景
}
.time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }

  .dashboard-container {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            justify-content: center;
            position: absolute;
            background-size: cover;
            background-color: #99dee9;
  }

.dashboard-container1 {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #99dee9;
}
.tools-div {
  margin-top: 5px;
  padding: 5px;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  width: 610px;
}
</style>
